<template>
  <div id="app" class="min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50 dark:from-dark-900 dark:to-dark-800">
    <!-- 粒子背景 -->
    <ParticleBackground />
    
    <!-- 主题切换按钮 -->
    <ThemeToggle class="fixed top-4 right-4 z-50" />
    
    <!-- 音效控制 -->
    <SoundControl class="fixed top-4 right-16 z-50" />
    
    <!-- 导航栏 -->
    <Navbar />
    
    <!-- 主要内容 -->
    <main class="relative z-10">
      <router-view v-slot="{ Component }">
        <transition name="page" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
    
    <!-- 页脚 -->
    <Footer />
    
    <!-- 返回顶部按钮 -->
    <BackToTop />
    
    <!-- 加载状态 -->
    <LoadingOverlay v-if="loading" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useThemeStore } from '@/stores/theme'
import { useSoundStore } from '@/stores/sound'
import ParticleBackground from '@/components/ParticleBackground.vue'
import ThemeToggle from '@/components/ThemeToggle.vue'
import SoundControl from '@/components/SoundControl.vue'
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'
import BackToTop from '@/components/BackToTop.vue'
import LoadingOverlay from '@/components/LoadingOverlay.vue'

const themeStore = useThemeStore()
const soundStore = useSoundStore()
const loading = ref(true)

// 初始化主题
onMounted(() => {
  // 应用保存的主题
  themeStore.initTheme()
  
  // 初始化音效
  soundStore.initSound()
  
  // 模拟加载完成
  setTimeout(() => {
    loading.value = false
  }, 1000)
  
  // 播放欢迎音效
  setTimeout(() => {
    soundStore.playSound('welcome')
  }, 1500)
})

// 清理资源
onUnmounted(() => {
  soundStore.cleanup()
})
</script>

<style>
/* 页面切换动画 */
.page-enter-active,
.page-leave-active {
  transition: all 0.3s ease;
}

.page-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff6b9d, #6c5ce7);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #db2777, #7c3aed);
}

/* 选择文本样式 */
::selection {
  background: rgba(255, 107, 157, 0.3);
  color: inherit;
}

/* 焦点样式 */
*:focus {
  outline: 2px solid #ff6b9d;
  outline-offset: 2px;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 字体渲染优化 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
</style> 